<template>
	<view>
		<view v-for="(item, index) in panels" :key="index+item" class="collapse-panel">
			<view class="header tc-gray" @click="handleClick(index)">
				{{ item.name}}
				<view class="iconfont">
					<img v-if="item.show" src="/static/img/user/bottom.png" alt="SVG Icon" class="menu-item-icon" />
					<img v-else src="/static/img/user/right.png" alt="SVG Icon" class="menu-item-icon" />
				</view>
			</view>
			<view class="content tc-gray" v-if="item.show">
				{{ item.content }}
			</view>
		</view>
	</view>
  </template>
   
  <script>
  export default {
	props: {
		panels: {
			type: Array,
			default: () => [
					{ 
						name: '这是第1个面板的标题。',
						content: '这里是折叠面板的内容。', 
						show: true 
					}
				]
			
		}
	},
	data() {
	  return {
	  };
	},
	methods: {
		handleClick(index) {
			this.$emit('update', index)
		}
	},
  };
  </script>
   
<style scoped lang="scss">
  .collapse-panel {
	border-bottom: 1rpx solid rgba(111, 111, 111, 0.31);
	margin-bottom: 10px;
	padding-bottom: 20rpx;
	&:last-child {
		border-bottom: none;
	}
  }
  .header {
	padding: 10px;
	cursor: pointer;
	position: relative;
	padding-right: 30px;
	.iconfont {
		position: absolute;
		right: 10px;
		top: 10px;
		.menu-item-icon {
			float: right;
			// margin-top: 24rpx;
			margin-right: -10rpx !important;
		}
		img {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
	}
  }
  .content {
	padding: 10px;
  }
  </style>